<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <link rel="stylesheet" href="./css/bootstrap-theme.css">
    <script src="./js/jquery.js"></script>
    <script src="./js/bootstrap.js"></script>
    <link rel="stylesheet" href="./css/bootstrap-table.css">
    <script src="./js/bootstrap-table.js"></script>
    <script src="./js/bootstrap-table-zh-CN.js"></script>
    <style>
        body {
            width: 95vw;
            margin-left: 2vw;
        }

        td:nth-child(3) {
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <!-- <div class="row">
        <div class="col-lg-6">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="Search for...">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button">Go!</button>
                </span>
            </div>
        </div>
    </div> -->
    <div class="row">
        <div class="col-lg-6">
            <button type="button" class="btn btn-danger" id="delmul"><span class="glyphicon glyphicon-trash"
                    aria-hidden="true"></span>&nbsp;&nbsp;&nbsp;批量删除</button>
            <button type="button" class="btn btn-primary" id="add"><span class="glyphicon glyphicon-plus"
                    aria-hidden="true"></span>&nbsp;&nbsp;&nbsp;添加管理员</button>
        </div><!-- /.col-lg-6 -->
    </div><!-- /.row -->
    <table id="table"></table>

    <div class="modal fade" tabindex="-1" role="dialog" id="addmodel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">添加管理员</h4>
                </div>
                <div class="modal-body">
                    <iframe id="navFrame" width="100%" height="300px" scrolling="no" frameborder="0"
                        src="./addadmin.html"></iframe>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="saveadmin">确定</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <div class="modal fade" tabindex="-1" role="dialog" id="delcheckmodel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">提示</h4>
                </div>
                <div class="modal-body">
                    <p>确认删除选中的项吗</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-danger" id="savedelmul">确定</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <div class="modal fade" tabindex="-1" role="dialog" id="userinfo">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">用户信息</h4>
                </div>
                <div class="modal-body">
                    <iframe id="userFrame" width="100%" height="330px" scrolling="no" frameborder="0"
                        src="./userinfo.html"></iframe>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <div class="modal fade" tabindex="-1" role="dialog" id="passwordreset">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">重置密码</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <div class="row row-no-gutters">
                            <label class="col-xs-3" style="text-align: center;">
                                <h5>您的新密码为</h5>
                            </label>
                            <div class="col-xs-4">
                                <input type="text" class="form-control" id="newpassword" value="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="savepassword">确定</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <script>
        //随机生成密码
        function passwords(pasLen) {
            var pasArr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '_', '-', '$', '%', '&', '@', '+', '!'];
            var password = '';
            var pasArrLen = pasArr.length;
            for (var i = 0; i < pasLen; i++) {
                var x = Math.floor(Math.random() * pasArrLen);
                password += pasArr[x];
            }
            return password
        }
        //重新加载table
        function refresh() {
            $.ajax({
                url: "http://192.168.96.193:8033/users",
                success: function (res) {
                    var data = res
                    $('#table').bootstrapTable("load", data);
                }
            })
        }

        $(() => {
            $('#table').bootstrapTable({
                url: "http://192.168.96.193:8033/users",
                // data: data,
                search: true,
                showSearchButton: true,
                showSearchClearButton: true,
                striped: true, //是否显示行间隔色
                pageNumber: 1, //初始化加载第一页
                pagination: true,//是否分页
                sidePagination: 'client',//server:服务器端分页|client：前端分页
                pageSize: 5,//单页记录数
                pageList: [5, 10],//可选择单页记录数
                columns: [{
                    checkbox: true,
                    fixed: 'left',
                    align: 'center'
                }, {
                    field: 'userId',
                    title: 'ID',
                    align: 'center'
                }, {
                    field: 'userName',
                    title: '用户名',
                    align: 'center'
                }, {
                    field: 'sex',
                    title: '性别',
                    align: 'center'
                }, {
                    field: 'phone',
                    title: '手机',
                    align: 'center'
                }, {
                    field: 'email',
                    title: '邮箱',
                    align: 'center'
                }, {
                    field: 'addtime',
                    title: '加入时间',
                    align: 'center'
                }, {
                    field: 'state',
                    title: '状态',
                    width: 150,
                    align: 'center',
                    valign: 'middle',
                    events: stateEvents,   //给按钮注册事件
                    formatter: stateFormatter
                }, {
                    field: 'administratir',
                    title: '管理员',
                    align: 'center',
                    formatter: function (value, row, index) {
                        if (row.administratir == 1) {
                            return `是`
                        } else if (row.administratir == 0) {
                            return `否`
                        }
                    }
                }, {
                    field: 'operate',
                    title: '操作',
                    width: 150,
                    align: 'center',
                    valign: 'middle',
                    events: operateEvents,   //给按钮注册事件
                    formatter: actionFormatter
                }]
            })
        })

        //更改账号状态
        window.stateEvents = {
            "click #disable": function (e, value, row, index) {
                $.ajax({
                    url: "http://192.168.96.193:8033/modifyUser",
                    type: "post",
                    data: {
                        "userId": row.userId,
                        "password": JSON.stringify(row.password),
                        "state": 1,
                    },
                    success: (res) => {
                        refresh();
                    }
                })
            },
            "click #enable": function (e, value, row, index) {
                $.ajax({
                    url: "http://192.168.96.193:8033/modifyUser",
                    type: "post",
                    data: {
                        "userId": row.userId,
                        "password": JSON.stringify(row.password),
                        "state": 0,
                    },
                    success: (res) => {
                        refresh();
                    }
                })
            }
        }

        //显示账号状态
        function stateFormatter(value, row, index) {
            if (row.state == 0) {
                return [
                    '<button id="disable" type="button" style="width:60px" class="btn  btn-xs btn-danger">未启用</button>',
                ].join('');
            } else if (row.state == 1) {
                return [
                    '<button id="enable" type="button" style="width:60px" class="btn  btn-xs btn-success">已启用</button>',
                ].join('');
            }

        }
        //操作栏按钮事件
        window.operateEvents = {
            //删除
            "click #deleteTable": function (e, value, row, index) {
                $.ajax({
                    url: "http://192.168.96.193:8033/deleteUser?user_id=" + row.userId,
                    type: "post",
                    success: function (res) {
                        refresh();
                    }
                })
            },
            //重置密码
            "click #reset": function (e, value, row, index) {
                $("#passwordreset").modal("toggle");
                $("#newpassword").attr("value", passwords(16))
                $("#savepassword").click(() => {
                    $.ajax({
                        url: "http://192.168.96.193:8033/modifyUser",
                        type: "post",
                        data: {
                            "userId": row.userId,
                            "password": JSON.stringify($("#newpassword").val()),
                            "state": row.state,
                        },
                        success: (res) => {
                            refresh();
                            $('#passwordreset').modal('hide')
                        }
                    })
                })
            }
        }

        //操作栏按钮
        function actionFormatter(value, row, index) {
            return [
                '<button id="deleteTable" type="button" style="width:60px" class="btn  btn-xs btn-danger">删除用户</button>',
                '<button id="reset" type="button" style="width:60px;margin:5px" class="btn  btn-xs btn-warning">重置密码</button>',
            ].join('');
        }

        $(function () {
            //拟态框事件
            $("#add").click(function () {
                $("#addmodel").modal("toggle");
            });
            $("#delmul").click(function () {
                $("#delcheckmodel").modal("toggle");
            });
            //添加管理员
            $("#saveadmin").click(() => {
                console.log($("#navFrame").contents().find("#name").val())
                $.ajax({
                    url: "http://192.168.96.193:8033/addUser",
                    type: "post",
                    data: {
                        "userName": JSON.stringify($("#navFrame").contents().find("#name").val()),
                        "sex": JSON.stringify($("#navFrame").contents().find("#selectpicker").val()),
                        "phone": JSON.stringify($("#navFrame").contents().find("#phone").val()),
                        "password": JSON.stringify($("#navFrame").contents().find("#password").val()),
                        "state": 1,
                        "administratir": 1,
                    },
                    success: function (res) {
                        console.log(res);
                        $('#addmodel').modal('hide')
                        refresh();

                    }
                })
            })

            //批量删除
            $("#savedelmul").click(() => {
                var selectRows = $("#table").bootstrapTable('getSelections')
                var data
                $.ajax({
                    url: "http://192.168.96.193:8033/users",
                    success: function (res) {
                        data = res

                        for (var i = 0; i < data.length; i++) {
                            for (var e = 0; e < selectRows.length; e++) {
                                if (data[i].userId == selectRows[e].userId) {
                                    $.ajax({
                                        url: "http://192.168.96.193:8033/deleteUser?user_id=" + data[i].userId,
                                        type: "post",
                                        success: function (res) {
                                            refresh()
                                        }
                                    })
                                }
                            }
                        }
                        $('#delcheckmodel').modal('hide')
                    }
                })

            })

            // 点击行显示用户信息
            $("#table").on("click-cell.bs.table", function (e, field, value, row, $element) {
                if (field == "userName") {
                    $("#userinfo").modal("toggle");
                    $("#userFrame").contents().find("#name").replaceWith(`<h5 id="name">${row.userName}</h5>`)
                    $("#userFrame").contents().find("#sex").replaceWith(`<h5 id="sex">${row.sex}</h5>`)
                    $("#userFrame").contents().find("#phone").replaceWith(`<h5 id="phone">${row.phone}</h5>`)
                    $("#userFrame").contents().find("#email").replaceWith(`<h5 id="email">${row.email}</h5>`)
                    if (row.administratir == 1) {
                        $("#userFrame").contents().find("#administratir").replaceWith(`<h5 id="administratir">是</h5>`)
                    } else if (row.administratir == 0) {
                        $("#userFrame").contents().find("#administratir").replaceWith(`<h5 id="administratir">否</h5>`)
                    }
                    $("#userFrame").contents().find("#addtime").replaceWith(`<h5 id="addtime">${row.addtime}</h5>`)
                }

            })
        });    
    </script>
</body>

</html>